<template>
    <div class="project zy-content ">
        <div class="title">
            <span>设备位置分类</span>
            <div class="icon">
        <span class="creatBtnright" @click="handleAdd" v-if="checkBtnPermission.dcmAcctestClassifyAddAddress">
          <span><Icon type="ios-add-circle" color="#187BDB" /></span>
          <span class="rightbtn">添加设备位置分类</span>
        </span>
            </div>
        </div>
        <Form :label-width="100" class="search-form">
            <Row>
                <Col :span="span">
                    <FormItem label="类型：">
                        <Select
                                v-model="searchParams.ftype "
                                filterable
                                clearable
                                :placeholder="`${$t('common.selectInfo')}`"
                        >
                            <Option
                                    v-for="(item) of typeList"
                                    :value="item.value"
                                    :key="item.value"
                            >{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="span">
                    <FormItem label="名称：">
                        <Input type="text" v-model="searchParams.name" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                </Col>
                <Col :span="span" align="center">
                    <Button type="primary" @click="changeNum" v-if="checkBtnPermission.dcmAcctestClassifyAddresslist">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <div class="tableContent">
            <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
                <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" @click="handleDelete(row)" v-if="checkBtnPermission.dcmAcctestClassifyDeleteAddress">{{$t('common.Delete')}}</span>
<!--                    <span class="operationBtn" @click="handleEdit(row)" v-if="checkBtnPermission.workorderToolEdit">{{$t('common.Edit')}}</span>-->
                </template>
            </Table>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
        <!--设备模态框-->
        <device-modal ref="deviceModal" @refresh="handleRefresh"/>
        <Modal :mask-closable="false"
                v-model="delelteVisible"
                title="">
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                    <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                    <span>{{$t('common.sureDelete')}}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default"  @click="delelteVisible = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="delLoading" @click="handleDeleteOk">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import DeviceModal from "./modules/deviceModal";
    export default {
        name: "deviceList",
        components: {
            DeviceModal
        },
        data() {
            return {
                ftype: '',
                delId: '',
                delLoading: false,
                delelteVisible: false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageSizeOption: [10,20,30,40],
                span: 6,
                searchParams: {},
                checkBtnPermission: {},
                columns: [
                    {
                        title: '类型',
                        key: 'ftype',
                        align: 'center',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', params.row.ftype == 1 ? '位置' : '分类')
                        }
                    },
                    {
                        title: '名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '创建人',
                        key: 'realname',
                        align: 'center',
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        align: 'center',
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        width: 200,
                        align: 'center'
                    },
                ],
                data: [],
                typeList: [{ value: '1', label: '位置'},{ value: '2', label: '分类'}]
            }
        },
        created() {
            this.changeNum()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="dcmAcctestClassifyAddresslist"){
                    this.checkBtnPermission.dcmAcctestClassifyAddresslist = true
                }
                if(item.code=="dcmAcctestClassifyAddAddress"){
                    this.checkBtnPermission.dcmAcctestClassifyAddAddress = true
                }
                if(item.code=="dcmAcctestClassifyDeleteAddress"){
                    this.checkBtnPermission.dcmAcctestClassifyDeleteAddress = true
                }
            }
        },
        methods: {
            //新增
            handleAdd() {
                this.$refs.deviceModal.show('add')
            },
            handleDelete(record) {
                this.delelteVisible = true
                this.delId = record.id
                this.ftype = record.ftype
            },
            //编辑
            handleEdit(record) {
                this.$refs.deviceModal.show('edit',record)
            },
            onSelectChange() {

            },
            //刷新
            handleRefresh() {
                this.searchList()
            },
            //分页
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                // if(this.searchParams.status==3){
                //   params.status = 0
                // }
                // if(this.dateList[1]){
                //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
                //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
                // }
                this.axios({
                    method: 'get',
                    url: '/dms/dcmAcctestClassify/addresslist',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                        this.data = res.data.list
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handleDeleteOk() {
                this.axios({
                    method: 'delete',
                    url: '/dms/dcmAcctestClassify/deleteAddress',
                    params: {
                        id: this.delId,
                        ftype: this.ftype
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.searchList()
                        this.$Message.success('删除成功！')
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.delelteVisible = false
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .project{
        //background: #ffffff;
        height: calc(100vh - 150px);
        .title{
            display: flex;
            justify-content: space-between;
            font-size: 20px;
            padding: 10px;
            border-bottom: 1px solid #dddddd;
            .icon {
                display: flex;
                .creatBtnright {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    i {
                        font-size: 36px;
                    }
                }
            }
        }
    }
</style>
